<template>
	<view class="home-page">
		<checkBranch />
		<view class="pad-16r">

			<!-- <view class="nav-consultation">
				<view class="one">
				</view>
				<view>
					<image class="img-nav" src="/static/images/patient/you.png"></image>
				</view>
				<view class="two">
		
				</view>
				<view>
					<image class="img-nav" src="/static/images/patient/you.png"></image>
				</view>
				<view class="three">
				</view>
			</view> -->
			<view class="between-center pad-b-16r">
				<u-swiper :list="swiperList" :border-radius="8*(750/375)" style="width: 49%;" height="360"
					@click="swiperClick"></u-swiper>
				<UserInfo></UserInfo>
			</view>
			<view class=" pad-b-16r">
				<u-image src="/static/images/patient/old.png" @click="changeOld" mode="widthFix"></u-image>
			</view>


			<!-- 挂号 -->
			<view class="between-center pad-b-16r register-serve">
				<view class="do-main-img-guahao">
					<u-image mode="widthFix" :src="hostApi+register1.pathImg" @click="doMainToPage(register1)">
					</u-image>
				</view>
				<view style="flex: 1;" class="register-serve">
					<u-image class="  do-main-out" mode="widthFix" :src="hostApi+register2.pathImg"
						@click="doMainToPage(register2)"></u-image>
					<view class="between register-serve">
						<u-image mode="widthFix" :src="hostApi+register3.pathImg"
							@click="doMainToPage(register3)"></u-image>
						<u-image mode="widthFix" :src="hostApi+register4.pathImg"
							@click="doMainToPage(register4)"></u-image>
					</view>
				</view>
			</view>
			<view v-if="listHadRegister.length>0" class=" pad-b-16r">
				<!-- 已挂号提示 点击跳转就诊指引 -->
				<register :register="listHadRegister"></register>
			</view>
			<!-- 综合服务 -->
			<view class=" pad-b-16r">
				<Tabs :list="listServerTabName" :current="currentServer" @handleChange="changeServerType"></Tabs>
			</view>
      
			<view class="do-server">
				<view class="servie-item" v-for="(item,index) in serverTypesChild">
					<wx-open-launch-weapp v-if="item.path.startsWith('{')" id="launch-btn"
						:username="JSON.parse(item.path).appId" :path="JSON.parse(item.path).url">
						<script type="text/wxtag-template">
            <!-- <template> -->
              <style>.btn{border: none;background: transparent;text-text-align: center;}.img {width: 32px;height: 32px;} .txt {color: #303133;font-size: 14px;}</style>
              <button class="btn">
                <img class="img" src="{{hostApi+item.pathImg}}"></img><br />
                <view class="txt">{{item.name}}</view>
              </button>
            </script>
            <!-- </template> -->
					</wx-open-launch-weapp>
					<view v-else @click="toPagePath(item.path)">
						<image class="img" :src="hostApi+item.pathImg"></image>
						<view>{{item.name}}</view>
					</view>
				</view>
			</view>
			<!-- 通知公告 -->
			<view class="notice">
				<view class="between-center  pad-b-16r">
					<view class="notice-title">
						<Tabs :list="listNoticeType" :current="currentNotice" @handleChange="changeNotice"></Tabs>
					</view>
					<view class="notice-more" @click="getMore">更多 >></view>
				</view>
				<view class=" pad-b-16r">
					<view v-for="(item,index) in listNotice">
						<view class="notice-item" @click="rePage(item)">
							<view class="notice-name over-2">{{item.name}}</view>
							<image v-if="item.subName" class="img-notice" :src="hostApi+item.subName"></image>
						</view>
					</view>
				</view>
			</view>
			<Dialog :show="showModal" @confirm="confirm" @close="close" title="温馨提示" :mask-close-able="true">
				<view class="slot-content">
					<view class="text-center">
						<rich-text :nodes="'有未支付，是否前往支付？'"></rich-text>
					</view>
					<view class="text-center">
						剩余<u-count-down color="#ff0000" :show-hours="false" :timestamp="countTime"></u-count-down>秒
					</view>
				</view>
			</Dialog>
			<u-modal v-model="showOld" :content-style="contentStyle" :show-title="false" :show-confirm-button="false"
				:mask-close-able="true">
				<view class="old-content">
					<view class="old-text">是否切换到长辈模式?</view>
					<view class="old-btn">
						<view class="old-btn-confirm" @click="toOldPage">确定</view>
						<view class="old-btn-cancel" @click="showOld=false">取消</view>
					</view>
				</view>
			</u-modal>
		</view>
	</view>
</template>
<script>
	import {
		mapGetters,
	} from 'vuex';
	import UserInfo from '@/components/UserInfo/index.vue'

	import {
		selectPayOrder
	} from '../../../api/payOrder';

	import {
		dateDefault,
		getFutureSeconds,
		getSecondBetweenDates
	} from '../../../utils/assist';

	import {
		menuSelect
	} from '../../../api/menu';
	import {
		getDeptList
	} from '@/api/department.js'

	import {
		noticeSelect
	} from '../../../api/notice';
	import {
		listNoticeType
	} from '../../../utils/listNoticeType';
	import tabs from '@/components/leftTabs/leftTabs.vue'
	import {
		selectCampus
	} from '../../../api/campus';
	import {
		dictionarySelect
	} from '@/api/dictionary.js'
	import register from './register.vue'
	import checkBranch from '@/components/checkBranch/checkBranch.vue'
	import Dialog from '@/components/Dialog/Dialog.vue'
	import Tabs from "@/components/Tabs/Tab.vue"
	import wx from 'jweixin-1.6.0';

	export default {
		components: {
			UserInfo,
			tabs,
			register,
			Dialog,
			checkBranch,
			Tabs,
		},
		data() {
			return {
				// 公告
				listNoticeType: listNoticeType,
				listNotice: [], //呈现的公告
				currentNotice: 0,
				currentServer: 0, //服务tab
				// 挂号
				// 轮播
				swiperList: [],
				listServerTabName: [],
				serverTypes: [],
				serverTypesChild: [], //综合服务里面点击某个tab按钮，就把值存进去
				actServerType: 0,
				registerList: [],
				countTime: 0, //倒计时多少秒 
				listHadRegister: [], //已挂号数据，用于提示
				showModal: false, //是否显示提示框
				register1: {},
				register2: {},
				register3: {},
				register4: {},
				barStyle: {
					"bottom": "5px",
					"background-color": "#41CFE6",
				},
				showOld: false, //是否切换到长辈模式
				contentStyle: {
					"height": "200px",
					"background-image": "url('/static/images/imgs/changeOld.png')",
					"background-repeat": "no-repeat",
					"background-size": "100% 100%"
				}
			}
		},
		computed: {
			...mapGetters([
				'bgApi', 'hospitalInfo', 'userInfo', 'hostApi'
			])
		},
		created() {
			this.getNoticeType();
			this.getHadRegister(); //得到已挂号提示
			this.getAllMenu();
		},
		methods: {
			toOldPage() {
				this.showOld = false
				this.toPagePath('/pages/Home/OldModel/OldModel')

			},
			changeOld() {
				this.showOld = true;
			},
			// 得到所有功能菜单信息
			getAllMenu() {
				menuSelect({
					codes: ["homebanner", "homedomain", "homeservice"],
					status: 1,
					orderBy: 'sort'
				}).then(res => {
					this.setBanner(res.homebanner)
					this.setDomainMenu(res.homedomain)
					this.setServiceMenu(res.homeservice)
				})
			},
			getHadRegister() {
				setTimeout(() => {
					if (this.userInfo) {
						let query = {
							patId: this.userInfo.patId,
							// openId: this.userInfo.openId,
							payStatus: 3, //缴费支付成功
							canVisit: 1,
							orderBy: "id desc"
						}
						if (!query.patId) {
							return
						}

						selectPayOrder(query).then(res => {
							this.listHadRegister = res;
						})
					}

				}, 1000)
			},
			doMainToPage(item) {
				let path = item.path
				// 如果是门诊挂号，需要判断是否有未支付订单
				if (path == '/pages/registerDepartment/MedicalNotice/MedicalNotice') {
					this.handleSelectPayOrder(path);
				} else {
					this.toPagePath(path)
				}
			},
			setServiceMenu(res) {
				let map = new Map();
				res.forEach(item => {
					if (item.parentId == 0) {
						map.set(item.id, item);
						// 将一级标题保存
						this.listServerTabName.push({
							name: item.name
						})
						this.serverTypes.push(item);
					}
				})
				this.serverTypes.forEach(item => {
					res.forEach(itema => {
						if (item.id == itema.parentId) {
							item.child ??= []
							item.child.push(itema);
						}
					})
				})
				// 默认显示第一个
				this.serverTypesChild = this.serverTypes[0].child
			},
			changeServerType(e) {
				this.actServerType = e;
				this.serverTypesChild = this.serverTypes[e].child
				this.currentServer = e;
			},
			setDomainMenu(res) {
				let map = new Map();
				res.forEach(item => {
					if (item.parentId != 0) {
						map.set(item.id, item)
					}
				})
				let list = []
				map.forEach((v, k) => {
					list.push(v);
				})
				this.register1 = list[0]
				this.register2 = list[1]
				this.register3 = list[2]
				this.register4 = list[3]
			},
			getOpenid(code) {
				return new Promise(function(resolve, reject) {
					let appid = "wxc15843160a0a4020"
					let secret = "CDXNCJDX202404060906cdxncjdxxlsx"
					let url =
						`api/sns/jscode2session?appid=${appid}&secret=${secret}&js_code=${code}&grant_type=authorization_code`
					wx.request({
						url: url,
						success: (res) => {
							let openid = res.data.openid;
							console.log('openid', openid);
							resolve(openid);
						},
						error: (res) => {}
					})
				})
			},
			// 获取轮播
			setBanner(res) {
				this.swiperList = [];
				let map = new Map();
				res.forEach(item => {
					if (item.parentId != 0) {
						map.set(item.id, item)
					}
				})
				map.forEach(item => {
					this.swiperList.push({
						image: this.hostApi + item.pathImg,
						title: item.name,
						path: item.path
					})
				})
			},
			swiperClick(idx) {
				// 点击挂号之前需要选择就诊卡
				if (!this.userInfo) {
					this.$u.toast('请先绑定就诊卡')
					return
				}
				let path = this.swiperList[idx].path;

				if (path == '/pages/registerDepartment/MedicalNotice/MedicalNotice') {
					this.handleSelectPayOrder(path);
				} else {
					this.toPagePath(path)
				}

			},
			toPagePath(path) {
				if (!this.userInfo) {
					this.$u.toast('请先绑定就诊卡')
					return;
				}
				uni.navigateTo({
					url: path
				})
			},
			// 查询是否有订单未支付
			handleSelectPayOrder(path) {
				if (!this.userInfo) {
					this.$u.toast('请先绑定就诊卡')
					return;
				}
				let date = new Date().getTime()
				const beforeTime = date - 15 * 60 * 1000;
				let orderTime = dateDefault(new Date(beforeTime))
				// 查询是否有未支付的订单
				selectPayOrder({
					patId: this.userInfo.patId,
					payStatus: 1,
					orderTime: orderTime,
					page: 1,
					size: 5,
					orderBy: "create_time desc"
				}).then(res => {
					console.log(res)
					if (res.length > 0) {
						res = res[0]
						// if (res.payStatus == 1) {
						let seconds = getFutureSeconds(new Date(res.orderTime))
						let num = 15 * 60 + seconds
						this.countTime = num;
						if (num > 0) {
							// 跳转到支付页面
							this.showModal = true;
						} else {
							this.toPagePath(path)
						}
						// } else {
						// 	this.toPagePath(path)
						// }

					} else {
						this.toPagePath(path)
					}
				})
			},
			getNoticeType() {
				dictionarySelect({
					code: 'listNoticeType',
					status: 1,
					orderBy: 'sort'
				}).then(res => {
					if (res.length > 0) {
						this.listNoticeType = []
						res.forEach(item => {
							this.listNoticeType.push({
								name: item.typeName,
								type: item.type
							})
						})
						this.getNotice()
					}
				})
			},
			// 获取公告
			getNotice() {
				noticeSelect({
					type: this.listNoticeType[this.currentNotice].type,
					status: 1,
					size: 5,
					page: 1
				}).then(res => {
					this.listNotice = res;
				}).catch(e => {
					this.list = ['暂无公告']
				})
			},
			changeNotice(e) {
				this.currentNotice = e
				this.getNotice();
			},
			// 公告页面
			rePage(e) {
				uni.navigateTo({
					url: `/pages/Home/Notice/detail?item=` + JSON.stringify(e)
				})
			},
			// 更多公告
			getMore() {
				uni.navigateTo({
					url: '/pages/Home/Notice/Index'
				})
			},
			confirm() {
				this.showModal = false;
				uni.navigateTo({
					url: '/pages/Pay/patientRegisterPay'
				})
			},
			close() {
				this.showModal = false;
			}
		}
	}
</script>

<style lang="scss" scoped>
	.home-page {
		height: 100%;
		background-image: url($mk-base+"/static/images/bg.png");
		background-size: 100% 400px;
		background-repeat: no-repeat;
	}

	.old-content {
		padding: 20px;
	}

	.old-text {
		text-align: center;
		margin-top: 80px;
		font-family: AlibabaPuHuiTi, AlibabaPuHuiTi;
		font-weight: 400;
		font-size: 16px;
		color: #333333;
		line-height: 15px;
		font-style: normal;
		text-transform: none;
	}

	.old-btn {
		display: flex;
		justify-content: space-around;
		margin-top: 20px;
	}

	.old-btn-confirm {
		background: linear-gradient(139deg, #76E1E7 0%, #40CFE6 100%);
		border-radius: 16px 16px 16px 16px;
		padding: 5px 25px;
	}

	.old-btn-cancel {
		border-radius: 16px 16px 16px 16px;
		border: 1px solid #D8D8D8;
		padding: 5px 25px;
	}

	// 就诊指引
	.nav-consultation {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 10px;

		.img-nav {
			width: 25px;
			height: 25px;
		}

		.one {
			width: 100px;
			padding: 0 10px;
			height: 35px;
			background-image: url($mk-base+"/static/images/patient/yibaodao.png");
			background-size: 100% 100%;
			background-repeat: no-repeat;
			display: flex;
			align-items: center;
			border-radius: 5px;

		}

		.two {
			width: 100px;
			padding: 0 10px;
			height: 35px;
			background-image: url($mk-base+"/static/images/patient/daijiancha.png");
			background-size: 100% 100%;
			background-repeat: no-repeat;
			display: flex;
			align-items: center;
			border-radius: 5px;
		}

		.three {
			width: 100px;
			padding: 0 10px;
			height: 35px;
			background-image: url($mk-base+"/static/images/patient/daijiancha.png");
			background-size: 100% 100%;
			background-repeat: no-repeat;
			display: flex;
			align-items: center;
			border-radius: 5px;
		}
	}



	.notice {
		width: 100%;

		.notice-item {
			display: flex;
			justify-content: space-between;
			align-items: center;
			height: 66px;
			padding: 10px;
			margin: 16rpx 0;
			box-shadow: 0 5px 1000px 1rpx #e0e2e7;
			// border: 1px solid #71E0E8;
			border-radius: 10px;
			// background: linear-gradient(to right, #f0feff, transparent);
		}


		.notice-name {
			flex: 1;
		}

		.notice-title {
			width: 70%;
		}

		.notice-more {
			// margin: 0 20px;
			color: #48D0DB;
		}

		.img-notice {
			height: 50px;
			width: 80px;
			margin-left: 20px;
			border-radius: 16rpx;
		}
	}

	.swiper {
		margin-bottom: 40rpx;
	}



	.img-ai {
		width: 100%;
		margin: 15px;
		border-radius: 10px;
		height: 50px;
	}

	.do-main {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
	}

	.do-main-img-guahao {
		// margin-right: 16rpx;
		width: 29.5%;
	}

	.register-serve {
		gap: 16rpx;
	}

	.do-main-out {
		margin-bottom: 12rpx;
	}

	.do-server {
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
	}

	.servie-item {
		text-align: center;
		margin: 30rpx 0;
		width: 25%;

		.img {
			width: 64rpx;
			height: 64rpx;
		}
	}

	.custom-tabs {}
</style>